<template>
    <div class="page">
        <img class="banner" src="~@/assets/img/tops.jpg" alt="" />

        <div class="querybox">
            <!-- 搜索框 -->
            <form class="formBox" action="" @submit.prevent="onSubmit">
                <div class="iptBox">
                    <img src="~@/assets/img/search.png" alt="" />
                    <div class="gaird"></div>
                    <input
                        v-model="searchKey"
                        @focus="focusHandle"
                        @change="changHandle"
                        @input="inputHandle"
                        @blur="blurHandle"
                        type="search"
                        placeholder="搜索排名"
                    />
                </div>
                <div class="selectBox" :class="isSelect ? 'selectBoxShow' : ''">
                    <div
                        v-for="(item, index) in searchList"
                        :key="index"
                        class="selectBoxItem"
                        @click="choose(item)"
                    >
                        {{ item }}
                    </div>
                </div>
            </form>

            <!-- 导航栏 -->
            <div class="navBarBigBox">
                <div class="navBarBox">
                    <div
                        class="navItem"
                        @click="navChoose('1')"
                        :class="isSelected == '1' ? 'isSelect' : ''"
                    >
                        <img
                            class="icons"
                            src="../../assets/img/yiyuanicon.png"
                            alt=""
                        />
                        <div class="title">医院综合</div>
                    </div>
                    <div
                        class="navItem"
                        @click="navChoose('2')"
                        :class="isSelected == '2' ? 'isSelect1' : ''"
                    >
                        <img
                            class="icons1"
                            src="../../assets/img/keshiicon.png"
                            alt=""
                        />
                        <div class="title">科室综合</div>
                    </div>
                </div>
                <div class="yearsBox" v-if="isSelected == '1'">
                    <div
                        v-for="(item, index) in yearsArr"
                        :key="index"
                        :class="index == isItem ? 'isYear' : ''"
                        @click="chooseYear(index)"
                    >
                        {{ item }}
                    </div>
                </div>
                <div class="yearsBox" v-if="isSelected == '2'">
                    <div
                        v-for="(item, index) in keshiArr"
                        :key="index"
                        :class="index == isItem1 ? 'isYear' : ''"
                        @click="chooseYear1(index)"
                    >
                        {{ item }}
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <!--标题 -->
            <div class="titles">
                <img src="../../assets/img/tt.png" alt="" />
                <div v-if="isSelected == '1'">
                    {{ yearsArr[isItem] }}年度中国医院排行榜
                </div>
                <div v-if="isSelected == '2'">{{ keshiArr[isItem1] }}</div>
            </div>

            <template>
                <!-- 医院综合 -->
                <div v-if="isSelected == '1'">
                    <listItem :selectList="selectList" />
                </div>
                <!-- 科室综合 -->
                <div v-else>
                    <div v-for="(it, index) in selectList1" :key="index">
                        <div class="itemsTitle">{{ it[0] }}</div>
                        <listItem :selectList="it[1]" />
                    </div>
                </div>
            </template>
        </div>
        <!-- 模态框 -->
        <div class="motalBox" v-if="showDialog">
            <Dialog
                @closeMotal="closeMotal"
                :DialogMsg="DialogMsg"
                :DialogList="DialogList"
            />
        </div>
    </div>
</template>

<script lang="ts">
import yy from "@/utils/index";
import listItem from "@/components/ListItem.vue";
import Dialog from "@/components/Dialog.vue";

const PinyinEngine = require("pinyin-engine");

import { Vue, Component } from "vue-property-decorator";
@Component({
    components: {
        listItem,
        Dialog,
    },
})
export default class Index extends Vue {
    searchKey: any = "";

    isSelected: string = "1";
    isItem: number = 0;
    isItem1: number = 0;

    selectList: any = [];
    selectList1: any = [];

    yearsArr: any = ["2019", "2018", "2017"];
    keshiArr: any = [
        "病理科",
        "传染感染",
        "耳鼻喉科",
        "放射科",
        "呼吸科",
        "风湿病",
    ];
    showDialog: boolean = false;
    pinyinEngine: any = {};
    DialogMsg: any = "";
    DialogList: any = [];
    isSelect: boolean = false;
    searchList: any = [];
    scrollTop: any = [];
    searchScroll: any = "";
    created() {
        this.selectList = yy.getListByKey(parseInt(this.yearsArr[0]));
        //    console.log(this.list)
        //           console.log(this.selectList)

        // 建立数据索引
        this.pinyinEngine = new PinyinEngine(yy.allName);
    }
    //       mounted() {
    //            window.addEventListener('scroll', this.handleScroll, true);
    //     // 监听（绑定）滚轮 滚动事件
    //     this.$on('hook:destroyed', () => {
    //       window.removeEventListener('scroll', this.handleScroll);
    //     });
    //    }
    navChoose(val: string) {
        this.setScrollTop();
        this.isSelected = val;
        if (val == "1") {
            this.selectList = yy.getListByKey(parseInt(this.yearsArr[0]));
        } else {
            this.selectList1 = yy.getListByKey(this.keshiArr[0]);
            // console.log(this.selectList1)
        }
    }
    //设置scrollTop
    setScrollTop() {
        var scrollTop =
            window.pageYOffset ||
            document.documentElement.scrollTop ||
            document.body.scrollTop;
        console.log(scrollTop);
        if (scrollTop > 235) {
            document.documentElement.scrollTop = 235;
            document.body.scrollTop = 235;
        }
    }
    onSubmit() {
        // 阻止默认表单提交
        // 做你自己想做的事，比如ajax请求后台数据
        return false;
    }
    //聚焦事件
    focusHandle() {
        //  var scrollTop =
        // window.pageYOffset ||
        // document.documentElement.scrollTop ||
        // document.body.scrollTop;
        // console.log(scrollTop)
        // this.searchScroll=scrollTop
        //  document.documentElement.scrollTop=235
        // console.log("聚焦")
        this.isSelect = true;
        if (this.searchKey == "") {
            this.searchList = [...this.pinyinEngine.query("")];
        } else {
            this.searchList = [...this.pinyinEngine.query(this.searchKey)];
        }
    }

    blurHandle() {
        this.isSelect = false;
        console.log(this.searchScroll);
        //  document.documentElement.scrollTop= this.searchScroll
        //  document.body.scrollTop= this.searchScroll
    }
    //选择
    choose(val: any) {
        this.DialogMsg = val;
        // console.log(yy.getListByName(this.DialogMsg))
        this.DialogList = [...yy.getListByName(this.DialogMsg)];
        // console.log(this.DialogList)
        this.showDialog = true;
    }
    //输入框变化
    changHandle(val: any) {
        console.log(val);
    }
    //input事件
    inputHandle() {
        // console.log(this.searchKey)
        this.searchList = [...this.pinyinEngine.query(this.searchKey)];
    }
    //选择年月
    chooseYear(index: number) {
        this.setScrollTop();
        this.isItem = index;
        let keyword = this.yearsArr[index];
        this.selectList = yy.getListByKey(parseInt(keyword));
        //   console.log(this.selectList)
    }
    //选择科室
    chooseYear1(index: number) {
        this.setScrollTop();
        this.isItem1 = index;
        let keyword = this.keshiArr[index];
        this.selectList1 = yy.getListByKey(keyword);
        //   console.log(this.selectList1)
    }
    //关闭模态框
    closeMotal() {
        this.showDialog = false;
    }

    handleScroll() {
        // 页面滚动距顶部距离
        var scrollTop =
            window.pageYOffset ||
            document.documentElement.scrollTop ||
            document.body.scrollTop;
        //console.log(scrollTop)
    }
}
</script>

<style lang="scss" scoped src="./index.scss"></style>
